<template>
  <div class="app-container">
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="关键字">
              <el-input
                v-model="searchObj.keyword"
                style="width: 100%"
                placeholder="用户名"
                @keyup.enter="fetchData"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display:flex">
          <el-button
            type="primary"
            icon="Search"
            size="small"
            @click="fetchData"
          >
            搜索
          </el-button>
          <el-button icon="Refresh" size="small" @click="resetData">
            重置
          </el-button>
        </el-row>
      </el-form>
    </div>

    <!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="userName" label="点赞用户" />
      <el-table-column prop="targetType" label="目标类型">
        <template #default="scope">
          {{ scope.row.targetType === 1 ? '帖子' : '评论' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="targetTitle"
        label="目标内容"
        show-overflow-tooltip
      />
      <el-table-column prop="createTime" label="点赞时间" />
      <!--      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <el-button
            type="danger"
            icon="Delete"
            size="small"
            @click="removeLike(scope.row.id)"
          >
            取消点赞
          </el-button>
        </template>
      </el-table-column>-->
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="pageParams.page"
      v-model:page-size="pageParams.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 添加点赞对话框 -->
    <el-dialog v-model="dialogVisible" title="添加点赞" width="30%">
      <el-form ref="likeForm" :model="like" label-width="120px">
        <el-form-item label="用户ID">
          <el-input v-model="like.userId" />
        </el-form-item>
        <el-form-item label="目标类型">
          <el-select v-model="like.targetType" placeholder="请选择目标类型">
            <el-option label="帖子" :value="1" />
            <el-option label="评论" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标ID">
          <el-input v-model="like.targetId" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveLike">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetLikePageList, SaveLike, RemoveLike } from '@/api/like'

// 定义数据模型
const listLoading = ref(false)
const list = ref([])
const total = ref(0)
const pageParams = ref({
  page: 1,
  limit: 10,
})
const searchObj = ref({
  keyword: '',
})

// 对话框数据
const dialogVisible = ref(false)
const like = ref({
  userId: '',
  targetType: 1,
  targetId: '',
})

// 页面加载时获取数据
onMounted(() => {
  fetchData()
})

// 获取列表数据的方法
const fetchData = async () => {
  listLoading.value = true
  try {
    const { data } = await GetLikePageList(
      pageParams.value.page,
      pageParams.value.limit,
      searchObj.value
    )
    list.value = data.list
    total.value = data.total
  } catch (error) {
    console.error(error)
    ElMessage.error('获取数据失败')
  } finally {
    listLoading.value = false
  }
}

// 重置查询表单
const resetData = () => {
  searchObj.value = {
    keyword: '',
  }
  fetchData()
}

// 添加点赞
const add = () => {
  like.value = {
    userId: '',
    targetType: 1,
    targetId: '',
  }
  dialogVisible.value = true
}

// 保存点赞
const saveLike = async () => {
  try {
    await SaveLike(like.value)
    ElMessage.success('添加成功')
    dialogVisible.value = false
    fetchData()
  } catch (error) {
    console.error(error)
    ElMessage.error('添加失败')
  }
}

// 取消点赞
const removeLike = async id => {
  try {
    await ElMessageBox.confirm('确定要取消点赞吗？', '提示', {
      type: 'warning',
    })
    await RemoveLike(id)
    ElMessage.success('取消成功')
    fetchData()
  } catch (error) {
    console.error(error)
    if (error !== 'cancel') ElMessage.error('取消失败')
  }
}

// 分页相关方法
const handleSizeChange = val => {
  pageParams.value.limit = val
  fetchData()
}

const handleCurrentChange = val => {
  pageParams.value.page = val
  fetchData()
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-div {
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
}

.tools-div {
  margin-top: 10px;
}
</style>
